<template>
    <svg :class="['svg-icon', svgClassName]">
        <use :href="svgIcon"></use>
    </svg>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
    iconName: {
        type: String,
        default: ''
    },
    className: {
        type: String,
        default: ''
    }
})

const svgClassName = ref(props.className)
const svgIcon = computed(() => `#${props.iconName}`)
</script>

<style lang="scss" scoped>
.svg-icon {
    height: 1em;
    width: 1em;
    fill: currentColor;
    vertical-align: middle;
}
</style>